<template>
	<view>
		<view class="example-body">
			<uni-datetime-picker v-model="range" type="daterange" @change="changeAction" @maskClick="maskClick" />
		</view>
		<view class=""
			style="display: flex;justify-content: space-around; background-color: white;padding: 20rpx; margin: 10rpx 0;  font-size: 32rpx;color: #333;font-weight: 700;">

			<!-- <view class="">
				<text>总净利润:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +totaljing}}</text>
			</view> -->
			
			<view class="" @click="orderExcelAction" style="color: #007aff;">
				打印订单
			</view>
			<view class="" @click="dayinAction" style="color: #007aff;">
				打印发货单
			</view>
		
		</view>
			<view @click="orderFuzhiUrl" v-if="durl != ''" class="" style="background-color: #fff; padding: 20rpx; margin: 10rpx 0;font-size: 24rpx; color: #007aff;">
				<view class="element">{{"订单"+ durl}}</view>
			</view>
			<view @click="fuzhiUrl" v-if="url != ''" class="" style="background-color: #fff; padding: 20rpx; margin: 10rpx 0; font-size: 24rpx; color: #007aff;">
				<view class="element">{{"发货单"+ url}}</view>
			</view>
		<view style="border-radius: 12rpx; font-weight: 700; margin: 20rpx; background-color: white; padding: 20rpx;"
			class="" v-for="(item, index) in list">
			<view class="" style="display: flex; align-items: center; justify-content: space-between;">
				<view class="">
					<text>单号:</text>
					<text style="margin-left: 10rpx;">{{item.number}}</text>
				</view>
				<view class="" style="color: #dd524d;">
					{{item.statusvalue}}
				</view>
			</view>
			<view class="" style="margin: 10rpx 0; font-size: 28rpx; color: #333;">

				<text>订单日期:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.create_time}}</text>
			</view>
			<view class="" style="margin: 10rpx 0; font-size: 28rpx; color: #333;">

				<text>发展人:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.same + '/' +item.name}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>档位:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.dangwei}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>返现金额:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.xprice}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>补差款金额:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.bprice}}</text>
			</view>
			<view class="" style=" display: flex; flex-wrap: wrap; font-size: 24rpx;">
				<view style="position: relative;" v-for="(goodsItem,goodsIndex) in item.goodItems" class="">
					<view
						style="color: #007aff; border: 2rpx solid #007aff;margin:10rpx; padding: 2rpx 10rpx; border-radius: 6rpx;"
						class="">
						{{goodsItem.name + ' / ' + goodsItem.type + ' / ¥' + goodsItem.price}}
					</view>

				</view>
			</view>
		<!-- 	<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>家电差价:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.chajia}}</text>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>毛利润:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.total}}</text>
			</view>

			<view class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>手续费:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{"¥ " +item.shouxufei}}</text>
			</view>
			
			<view v-if="item.percent == 0.05" class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>净利润:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.jingshow}}</text>
			</view>
			<view v-else class="" style="margin: 10rpx 0;  font-size: 28rpx;color: #333;">
				<text>净利润:</text>
				<text style="margin-left: 10rpx; color: #f0ad4e;">{{item.jingshow}}</text>
			</view> -->
			<view class=""
				style="margin: 10rpx 0;  font-size: 28rpx; color: #333; display: flex; align-items: center; justify-content: space-between;">
				<view class="">

					<text>用户名:</text>
					<text style="margin-left: 10rpx;">{{item.yname}}</text>
				</view>
				<view class="">
					{{item.yphone}}
				</view>
			</view>
			<view class="" style="margin: 10rpx 0;  font-size: 28rpx; color: #333;">
				<text>收货信息:</text>
				<text style="margin-left: 10rpx;">{{item.address}}</text>
			</view>
			<view v-if="item.knumber != undefined" class=""
				style="display: flex; justify-content: space-between; margin: 10rpx 0;  font-size: 28rpx; color: #333;">
				<view class="">
					<text>快递单号:</text>
					<text style="color: #f0ad4e; margin-left: 10rpx;">{{item.knumber}}</text>
				</view>
				<view class="">
					<text @click="chakankuaidi" :data-index="index" style="color: #007aff;">查看快递状态</text>
				</view>
			</view>
			<view class="" style="background-color: #e5e5e5;padding: 1rpx; margin-top: 20rpx;">

			</view>
			<view class="" style="display: flex;  margin-top: 20rpx;">
				<button @click="deleteBtnAction" :data-index="index" type="primary" size="mini"
					style="background-color: #007aff;">删除</button>
				<button @click="upBtnAction" :data-index="index" type="primary" size="mini"
					style="background-color: #007aff;">上传快递单号</button>
			</view>

		</view>
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确定是否此订单"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="快递单号" placeholder="请输入快递单号"
					@confirm="dialogInputConfirm">
					<view class=""
						style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
						<view class=""
							style="flex: 1; border-radius: 6rpx; border: 2px solid #e5e5e5; width: 100%; padding: 10rpx;">
							<input type="text" name="" id="" v-model="kuaidiItem.knumber">
		
						</view>
						<view @click="saomaAction" class="" style="width: 100rpx;">
							<uni-icons style="color: #666; margin-left: 20rpx;" type="scan" size="30"></uni-icons>
						</view>
					</view>
			
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import api from '../../utils/interface.js'

	export default {
		data() {
			return {
				data: {
					start_time: '',
					end_time: '',
					uid: '',
					page: 1,
					size: 10
				},
				list: [],
				userinfo: {},
				item: {},
				kuaidiItem: {},
				currentIndx:0,
				totaljing: '',
				url:'',
				durl:''
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('data')
			this.getData()
		},
		onPullDownRefresh() {
			this.data.page = 1;
			this.getData()

		},
		onReachBottom() {
			this.data.page++;
			this.getData()
		},
		methods: {
			saomaAction(){
				var that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						that.kuaidiItem.knumber = res.result;
					},
					fail: function (res) {
						uni.showToast({
							title:'扫描失败,请重试',
							icon:'none'
						})
					}
				});
			},
			async orderExcelAction() {
				
				if(this.list.length == 0){
					return uni.showToast({
						title:'订单列表为空,请重新筛选'
					})
				}
				
				const value = this.list.map( item =>{
					return item.id
				}).join(',');
				
			
				uni.showLoading({
					title: "文档生成中..."
				})
				const config = {
					url: api.baseUrl + api.createOrderExcel,
					method: 'post',
					data: {
						value
					}
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				uni.hideLoading()
			
				if (code == 1) {
					console.log(code, data);
					const url = api.imageBaseUrl + "/" + data.downurl
					this.durl = url;
					console.log(url);
					uni.downloadFile({
						url,
						success: (res) => {
							let xlsFilePath = res.tempFilePath
							if (res.statusCode === 200) {
								uni.saveFile({
									tempFilePath: xlsFilePath,
									success: (res) => {
										console.log(res)
										//res.savedFilePath文件的保存路径
										//保存成功并打开文件
										uni.openDocument({
											filePath: res.savedFilePath,
											success: (res) => {
												console.log('成功打开文档')
											}
			
										})
									},
									fail: () => console.log('下载失败')
								})
			
								console.log('下载成功');
							}
						}
					});
			
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			
			},
			orderFuzhiUrl(){
				uni.setClipboardData({
				  data: this.durl, // 设置要复制的文本内容
				  success(res) {
				    console.log("成功复制到剪贴板");
					uni.showToast({
						title:'成功复制到剪贴板'
					})
				  },
				  fail(err) {
				    console.error("复制失败", err);
				  }
				});
			},
			fuzhiUrl(){
				uni.setClipboardData({
				  data: this.url, // 设置要复制的文本内容
				  success(res) {
				    console.log("成功复制到剪贴板");
					uni.showToast({
						title:'成功复制到剪贴板'
					})
				  },
				  fail(err) {
				    console.error("复制失败", err);
				  }
				});
			},
			async dayinAction() {
				
				if(this.list.length == 0){
					return uni.showToast({
						title:'订单列表为空,请重新筛选',
						icon:"none"
					})
				}
				
				const value = this.list.map( item =>{
					return item.id
				}).join(',');
				

				uni.showLoading({
					title: "文档生成中..."
				})
				const config = {
					url: api.baseUrl + api.createExcel,
					method: 'post',
					data: {
						value
					}
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				uni.hideLoading()

				if (code == 1) {
					console.log(code, data);
					const url = api.imageBaseUrl + "/" + data.downurl
					this.url = url;
					console.log(url);
					uni.downloadFile({
						url,
						success: (res) => {
							let xlsFilePath = res.tempFilePath
							if (res.statusCode === 200) {
								uni.saveFile({
									tempFilePath: xlsFilePath,
									success: (res) => {
										console.log(res)
										//res.savedFilePath文件的保存路径
										//保存成功并打开文件
										uni.openDocument({
											filePath: res.savedFilePath,
											success: (res) => {
												console.log('成功打开文档')
											}

										})
									},
									fail: () => console.log('下载失败')
								})

								console.log('下载成功');
							}
						}
					});

				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}

			},
			chakankuaidi(e) {
				const index = e.currentTarget.dataset.index

				const item = this.list[index]
				const senderphone = item.yphone.substr(-4);
				uni.navigateTo({
					url: "/pages/kuaidichaxun/kuaidichaxun?number=" + item.knumber + '&senderphone=' + senderphone
				})
			},
			upBtnAction(e) {
				const index = e.currentTarget.dataset.index
				this.currentIndx = index
				const item = this.list[index]
				this.kuaidiItem = Object.assign({}, item);
				this.$refs.inputDialog.open()

			},
			async dialogInputConfirm() {
				console.log(this.item);
				const config = {
					url: api.baseUrl + api.updateOrder,
					method: 'post',
					data: this.kuaidiItem
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: '上传成功'
					})
					// this.getData()
					
					const item = this.list[this.currentIndx]
					item.knumber = this.kuaidiItem.knumber
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			dialogClose() {

			},
			async dialogConfirm() {

				const config = {
					url: api.baseUrl + api.deleteOrder,
					method: 'post',
					data: this.item
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					this.data.page = 1;
					this.getData()
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			deleteBtnAction(e) {
				const index = e.currentTarget.dataset.index
				this.item = this.list[index]

				this.$refs.alertDialog.open()
			},
			async getData() {
				const config = {
					url: api.baseUrl + api.getOrdersList,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				uni.stopPullDownRefresh()

				console.log(code, data);
				if (code == 1) {
					if (this.data.page == 1) {
						this.list = []
						this.list = data
					} else {
						this.list = [...this.list, ...data]
					}
					this.list.map(item => {
						if (item.status == 1) {
							item.statusvalue = '待发货'
						}
						if (item.status == 2) {
							item.statusvalue = '已发货'
						}
						if (item.status == 3) {
							item.statusvalue = '已完成'
						}

						// item.chajia = item.goodItems.reduce((prev, cur) => {
						// 	return cur.cprice + prev;
						// }, 0);
						// item.jiadiantotal = item.goodItems.reduce((prev, cur) => {
						// 	return cur.price + prev + 4;
						// }, 0);
						
						// if (item.percent == 0.05) {
						// 	item.total = item.dangweiprice - item.xprice - item.jiadiantotal - 10
						// }else{
						// 	item.total = item.dangweiprice - item.xprice - item.jiadiantotal 
						// }

						// let shouxufei = this.math.multiply(item.total, item.percent, 2)

						// if (item.percent == 0.05) {
						// 	if (shouxufei > 30) {
						// 		shouxufei = 30
						// 	}
						// }
						// item.shouxufei = shouxufei
						// if (item.percent == 0.05) {
						// 	item.jing =  item.total - item.shouxufei - 10 
						// 	if(item.jing > 600){
						// 		item.jingshow = "¥ 600 / ¥ " + (item.jing - 600) 
						// 	}else{
						// 		item.jingshow ="¥ " + item.jing
						// 	}
						// }else{
						// 	item.jingshow ="¥ " + item.jing
						// }
						return item
					})
					this.totaljing = this.list.reduce((prev, cur) => {
						return cur.jing + prev;
					}, 0);

				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			changeAction(e) {

				console.log('changeAction事件:', e);

				this.data.start_time = e[0];
				this.data.end_time = e[1];
				this.data.page = 1;
				this.getData()
			}
		}
	}
</script>

<style>
	page {
		background-color: #e5e5e5;
	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}
	.element {
	    white-space: nowrap; /* 不换行 */
	    overflow: hidden; /* 隐藏超出部分 */
	    text-overflow: ellipsis; /* 显示省略号 */
	}
</style>